<template>
  <div class="app-container">
    <div style="display: flex;align-items: center;">
      <!-- <el-button type="primary" @click="openSeting">配置设置</el-button> -->
      <!-- <span v-if="iframeUrlIsNull" style="margin-left: 20px;">配置连接：<a :href="iframeUrl" target="_blank"
          style="color: #409EFF;">{{iframeUrl}}</a></span> -->
    </div>
    <div style="margin-top: 20px;">
      <iframe v-if="iframeUrlIsNull" :src="iframeUrl" frameborder="0" style="width: 100%;height: calc(86vh);"></iframe>
    </div>
    <!-- <el-dialog title="配置设置" v-model="open" @close="cancel" width="24%">
      <el-form ref="allDevice" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="连接" prop="url">
          <el-input :rows="5" type="textarea" :disabled="loading" v-model="form.url" placeholder="请输入连接" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button :loading="loading" type="primary" @click="submitForm">确 定</el-button>
          <el-button :loading="loading" @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog> -->
  </div>
</template>

<script setup name="allDevice">
  const { proxy } = getCurrentInstance()
  const data = reactive({
    form: {
      url: '',
    },
    rules: {
      url: [
        { required: true, message: "请输入连接", trigger: "blur" }
      ],
    }
  })

  const { queryParams, form, rules } = toRefs(data)
  const userInfo = ref(localStorage.getItem('userInfo'))
  // console.log(userInfo, 'ABCDEFG-userInfo');
  const userData = userInfo.value ? JSON.parse(userInfo.value) : ''

  let remark = ref(userData.remark)
  let newUrl = remark.value ? JSON.parse(remark.value) : []

  let findUrl = newUrl.length > 0 ? newUrl.find((item) =>{ return item.name == '全部设备'}) ? newUrl.find((item) => { return item.name == '全部设备' }).url : '' : ''
  console.log(findUrl, 'ABCDEFG-findUrl')
  const iframeUrl = ref(findUrl)
  // form.value.url = findUrl ? findUrl : ''
  const iframeUrlIsNull = ref(findUrl ? true : false)
  const open = ref(false)
  const loading = ref(false)
  const openSeting = () => {
    form.value.url = findUrl ? findUrl : ''
    open.value = true
  }
  const cancel = () => {
    form.value.url = ''
    open.value = false
  }
  // const submitForm = () => {
  //   let params = form.value.url
  //   proxy.$refs["allDevice"].validate(valid => {
  //     if (valid) {
  //       loading.value = true
  //       localStorage.setItem('allDeviceUrl', params)
  //       iframeUrl.value = form.value.url
  //       iframeUrlIsNull.value = false
  //       setTimeout(() => {
  //         loading.value = false
  //         iframeUrlIsNull.value = true
  //         open.value = false
  //       })
  //     }
  //   })
  // }
  // getList();
</script>
<style lang='scss' scoped>
  .el-row {
    display: flex;
    /* align-items: center; */
    flex-wrap: wrap;
  }

  .demo-ruleForm {
    width: 100%;

    :deep() {
      .el-input:not(.el-message-box__input .el-input) {
        max-width: 100% !important;
      }

      .el-select {
        width: 100% !important;
      }

      .el-input {
        width: 100% !important;
      }

      .el-date-editor--daterange.el-input,
      .el-date-editor--daterange.el-input__inner,
      .el-date-editor--timerange.el-input,
      .el-date-editor--timerange.el-input__inner {
        width: 100% !important;
        flex: 1 !important;
      }
    }
  }

  :deep() {
    .el-dialog {
      display: flex;
      flex-direction: column;
      margin: 0 !important;
      position: absolute;
      top: 40%;
      left: 50%;
      transform: translate(-50%, -40%);
      max-height: calc(100% - 60px);
      max-width: calc(100% - 30px);
    }

    .el-dialog .el-dialog__body {
      flex: 1;
      overflow: auto;
    }
  }
</style>
